<template>
    <text>
        {{ printedText }}
    </text>
  </template>
  
  <script>
  export default {
    props: {
      text: {
        type: String,
      }
    },
    watch: {
        'text': {
            handler: function (newValue, oldValue) {
                if (newValue !== oldValue) {
                    this.setTxt()
                    this.unprintedText = newValue.slice(this.printedText.length);
                    clearInterval(this.timer);
                    this.startTyping();
                }
            }
        },
    },
    data() {
      return {
        unprintedText: '',
        printedText: '',
        timer: null,
        interval: 25,
      }
    },
    methods: {
    startTyping() {
      this.timer = setInterval(() => {
        if (this.unprintedText.length > 0) {
          this.printedText += this.unprintedText.charAt(0);
          this.unprintedText = this.unprintedText.slice(1);
          this.printedStatus = false
        } else {
          clearInterval(this.timer);
          this.timer = null
        }
      }, this.interval);
    },
    setTxt(){
      if(this.think){
        this.printedText = ''
      }
    }
    },
  }
  </script>
